<template>
  <view class="Steps">
    <view class="item flex">
      <view class="status">
        <image
          v-if="status > 1"
          :src="StatusObj.imgs.SucesAudit"
          mode="scaleToFill"
        />
        <image
          v-if="status == 1"
          :src="StatusObj.imgs.UnderReview"
          mode="scaleToFill"
        />
        <image
          v-if="status < 1"
          :src="StatusObj.imgs.Beapproved"
          mode="scaleToFill"
        />
      </view>
      <view class="item_tip">
        <view class="tip">{{ StatusObj.datas.SucesAuditText }}</view>
        <view>{{ StatusObj.datas.SucesAuditTime }}</view>
      </view>
    </view>
    <view class="Dividingline"></view>
    <view class="item flex">
      <view class="status">
        <image
          v-if="status > 2"
          :src="StatusObj.imgs.SucesAudit"
          mode="scaleToFill"
        />
        <image
          v-if="status == 2"
          :src="StatusObj.imgs.UnderReview"
          mode="scaleToFill"
        />
        <image
          v-if="status < 2"
          :src="StatusObj.imgs.Beapproved"
          mode="scaleToFill"
        />
      </view>
      <view class="item_tip">
        <view class="tip">{{ StatusObj.datas.UnderReviewText }}</view>
        <view>{{ StatusObj.datas.UnderReviewTime }}</view>
      </view>
    </view>
    <view class="Dividingline"></view>
    <view class="item flex">
      <view class="status">
        <image
          v-if="status > 3"
          :src="StatusObj.imgs.SucesAudit"
          mode="scaleToFill"
        />
        <image
          v-if="status == 3"
          :src="StatusObj.imgs.UnderReview"
          mode="scaleToFill"
        />
        <image
          v-if="status < 3"
          :src="StatusObj.imgs.Beapproved"
          mode="scaleToFill"
        />
      </view>
      <view class="item_tip">
        <view class="tip">{{ StatusObj.datas.BeapprovedText }}</view>
        <view>{{ StatusObj.datas.BeapprovedTime }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
/**
 * @status状态
 * @parms { 已审核 } SucesAudit
 * @parms { 当前审核} UnderReview
 * @parms { 未审核 } Beapproved
 */
/**
 * @StatusObj数据
 * @imgs  {  SucesAudit, UnderReview,Beapproved   } 状态图
 * @datas { SucesAuditText,SucesAuditTime,
 *          UnderReviewText,UnderReviewTime,
 *          BeapprovedText,BeapprovedTime
 *        } 状态数据
 */
const Props = defineProps(["status", "StatusObj"]);
</script>

<style lang="scss" scoped>
image {
  width: 100%;
  height: 100%;
}
.Steps {
  background: #fff;
  /* padding: 50rpx 40rpx; */
  .Dividingline {
    width: 1rpx;
    height: 130rpx;
    border: 1rpx dashed $color_def;
    border-radius: 15rpx;
    margin-left: 22rpx;
  }
  .status {
    margin: 0 auto;
    width: 50rpx;
    height: 50rpx;
  }

  .item {
    font-size: 16rpx;
    color: #9e9c9c;
    text-align: left;
    .item_tip {
      margin-left: 20rpx;
      .tip {
        margin-bottom: 5rpx;
        font-size: 28rpx;
        color: #000;
      }
    }
  }
}
</style>
